<template>
	<view>
		<u-cell-group class="cell-group" :border="false">
			<u-cell title="头像" isLink :border="false">
				<u-upload slot="value" @afterRead="afterRead" :fileList="fileListavatar" name="avatar" :maxCount="1"
					:deletable="false" width="120rpx" height="120rpx">
					<u-avatar mode="aspectFill" :src="avatar" size="120rpx" default-url="/static/img/defult_photo.png"></u-avatar>
				</u-upload>
			</u-cell>
			<u-cell title="姓名" :value="userInfo.nickname" isLink :border="false" @click="nickname=userInfo.nickname;showNickname=true"></u-cell>
			<u-cell title="修改手机号" :value="userInfo.mobile" :border="false" isLink @click="showEditMobile=true"></u-cell>
		</u-cell-group>
		<view class="btn">
			<u-button type="error" text="退出登录" @click="showLogout = true"></u-button>
		</view>
		<u-popup :show="showNickname" @close="showNickname=false">
			<view class="popup-box">
				<u--input v-model="nickname" maxlength="20" showWordLimit border="none" :customStyle="{background:'#f5f5f5',padding:'20rpx'}" placeholder="请输入昵称"
					clearable></u--input>
				<u-button type="success" text="保存" @click="submit" :customStyle="{marginTop:'30rpx'}"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showEditMobile" @close="showEditMobile=false">
			<view class="popup-box">
				<u--form class="mform" labelPosition="left" labelWidth="160rpx" :model="mform"  ref="mform" errorType="toast">
					<u-form-item label="新手机号" prop="mobile" style="margin-top: 16rpx;">
						<u--input v-model="mform.mobile" border="none" clearable placeholder="请输入新手机号"></u--input>
					</u-form-item>
					<u-form-item label="验证码" prop="code">
						<u--input v-model="mform.verify" border="none" placeholder="请输入验证码"></u--input>
						<u-code ref="uCode" @change="codeChange" seconds="60" unique-key="code"></u-code>
						<u-button slot="right" type="success" :text="tips" @tap="getCode" size="small"></u-button>
					</u-form-item>
				</u--form>
				<u-button type="success" text="保存" @click="msubmit" :customStyle="{marginTop:'30rpx'}"></u-button>
			</view>
		</u-popup>
		<u-modal width="500rpx" title="提示" content="您确定要退出登录吗？" :show="showLogout" showCancelButton
			closeOnClickOverlay @confirm="logout" @cancel="showLogout = false" @close="showLogout = false"
			confirmColor="#DC0312"></u-modal>
	</view>
</template>

<script>
	import config from '@/common/config'
	export default {
		data() {
			return {
				tips: '获取验证码',
				fileListavatar: [],
				showLogout: false,
				avatar: "",
				userInfo: {},
				destoryStatus: false,
				showNickname: false,
				showEditMobile: false,
				nickname: '',
				mform:{
					verify_id:'',
					mobile:'',
					verify:''
				}
			};
		},
		computed: {
			
		},
		onShow() {
			
		},
		onLoad(){
			this.getUserInfo()
		},
		methods: {
			msubmit(){
				var _this = this;
				uni.$u.http.post('/User/changeMobile',{...this.mform}).then(res => {
					_this.getUserInfo();
					_this.showEditMobile = false;
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if(!this.mform.mobile){
						return uni.$u.toast("请填写手机号码");
					}
					uni.showLoading({
						title: '正在获取验证码'
					})
					uni.$u.http.post('/User/sendSms',{mobile:this.mform.mobile}).then(res => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.mform.verify_id = res;
						this.$refs.uCode.start();
					}).catch(err => {
						uni.$u.toast(err)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit(){
				var _this = this;
				uni.$u.http.post('/User/updateInfo',{key:'nickname',val: this.nickname}).then(res => {
					_this.getUserInfo();
					_this.showNickname = false;
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			codeChange(text){
				this.tips = text;
			},
			getUserInfo() {
				uni.$u.http.get('/User/center?stat=1',{}).then(async res =>{
					this.userInfo = res
					this.avatar = res.avatar
				}).catch(err => {
				})
			},
			// 新增图片
			afterRead(event) {
				let lists = [].concat(event.file)
				var _this = this;
				var token = uni.getStorageSync('LOGIN_TOKEN_KEY');
				
				 
				// for (let i = 0; i < lists.length; i++) {
				var item = lists[0];
				this.avatar = item.url
				if (lists && item && item.url) {
					uni.uploadFile({
						url: config.baseApi + '/Upload/upload', //仅为示例，非真实的接口地址
						filePath: item.url,
						name: 'file',
						formData:{
							field: "avatar"
						},
						header: {
							"Authorization": token
						},
						success: (uploadFileRes) => {
							var rs = JSON.parse(uploadFileRes.data)
							if (rs.status == 200) {
								uni.$u.toast("上传成功!")
							}
							_this.fileList = [{
								'name':'',
								'url': config.baseUrl + rs.data
							}]
						}
					});
				}
			},
			logout() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}

	.cell-group {
		margin-top: 16rpx;
		background-color: #fff;
		font-family: PingFang SC-Medium, PingFang SC;
	}

	/deep/.u-cell {
		border-bottom: 1rpx solid #f7f7f7;

		.u-cell__body {
			padding: 30rpx;
		}
	}
	/deep/ .u-upload{
		width: 122rpx;
		flex: 0 0 122rpx !important;
	}
	.btn{
		padding: 100rpx 30rpx 30rpx 30rpx;
	}
	.popup-box{
		padding: 30rpx 30rpx 60rpx 30rpx;
	}
</style>